<script setup>
import {BaseImgUrl, BaseURL} from "../../utils/lshttp";
import CacheImage from "../../components/CacheImage.vue";
import {useFuli} from "./use_fuli";

const {
  userInfoStore,
  okShow,
  redeemList,
  resTTzkList,
  config,
  currentMenuIndex,
  listItem1,
  okBack,
  handleDetails,
  mianfeiling,
  toGold,
  toTask,
  redeem,
  toPage,
  gridChange,
  toAllTaskLookAD
} = useFuli()

const toMtRedBag = () => {
  if (userInfoStore.isLogin()) {
    uni.navigateTo({url: "/pages_gold/mt_redbag"})
  }
}

</script>

<template>

  <view style="position: relative">
    <view style="position: absolute;z-index: 0;top: 0;right: 0;width: 750rpx ;height: 780rpx">
<!--            <image :src="BaseImgUrl+'/fuli/background_top.png'" ></image>-->
      <cache-image :img-src="BaseImgUrl + '/fuli/background_top.png'"
                   height="750rpx" width="750rpx"/>
    </view>
  </view>

  <!-- #ifdef APP-PLUS || MP-->
  <view class="return_title">
    <u-status-bar></u-status-bar>
    <view class="content" @click="okBack">
      <text class="title">领食福利</text>
    </view>
  </view>
  <!-- #endif -->
  <view class="fuli_content">
    <view
        style="display: flex;align-items: center;justify-content:center;padding-top: 180rpx;position: relative;z-index: 1">
      <cache-image :img-src="BaseImgUrl + '/fuli/title.png'"
                   height="160rpx" width="620rpx" :style="{zIndex: 1}"/>
    </view>
    <view class="wrapbg">
      <view class="jf_detail">
        <view class="l_name">金币余额：
          <text>{{ config.my_gold_coin }}</text>
        </view>
        <view style="width: 0;height: 28rpx;border: 2rpx solid #dddddd;margin: 0 10rpx"></view>
        <view class="detail_text" @click="handleDetails()">金币明细</view>
        <view style="flex: 1"></view>
        <view class="go_dh" @click="toGold">去兑换</view>
      </view>
      <view class="white_content">
        <view style="position: absolute;z-index: 0;top: 0;right: 0;width: 100% ;height: 138rpx">
          <image :src="BaseImgUrl+'/fuli/task_bg1.png'" style="width: 100% ;height: 100%"></image>
        </view>
        <view class="rw_name" style="position: relative">
          <text class="l_text">做任务
            <text style="color: #F10B0B">赚金币领会员</text>
          </text>
        </view>
        <view class="task_item_box">
          <view class="small_box_parent">
            <view class="small_box" v-for="(item, index) in listItem1" :key="index">
              <view class="img_text">
                <view class="l_icon">
                  <image :src="item.icon"></image>
                </view>
                <view class="l_text">
                  <view class="title">{{ item.name }}</view>
                  <view class="desc">{{ item.subName }}</view>
                </view>
              </view>
              <view class="r_btn" v-if="item.btnName === '去看视频'" @click="toAllTaskLookAD">
                {{ item.btnName }}
                <!-- #ifdef H5 -->
                <wx-open-launch-weapp id="launch-btn"
                                      username="gh_45626294c5df"
                                      :path="'/pages/member/membertask?user_id=' + userInfoStore.userInfo.id + '&platform=H5'"
                                      style="position: absolute;z-index: 89;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #1db9ff;">
                  <component :is="'script'" type='text/wxtag-template' style="display: block;">
                    <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                  </component>
                </wx-open-launch-weapp>
                <!-- #endif -->
              </view>
              <view class="r_btn" @click="mianfeiling(item)" v-else>
                {{ item.btnName }}
              </view>
            </view>
          </view>
          <view @click="toTask"
                style="font-size: 26rpx;display: flex;align-items: center;margin-top: 1rpx;padding-top: 26rpx">
            <view style="flex: 1"></view>
            <text style="margin-left: 20rpx;color: #999999">更多任务</text>
            <image style="width: 22rpx;height: 22rpx;margin-left: 10rpx"
                   :src="BaseImgUrl + '/once/right.png'"></image>
            <view style="flex: 1"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- #ifdef H5 || MP-->
    <view @click="toMtRedBag" style="margin: 0 30rpx;background-color: #fffbfa;padding: 10rpx 20rpx;border-radius: 20rpx;font-size: 28rpx;
          display: flex;align-items: center;position: relative;height: 192rpx">
      <view style="position: absolute;z-index: 0;top: 0;right: 0;width: 100% ;height: 100%">
<!--        <cache-image :src="BaseImgUrl+'/fuli/get_bag_red_bg.png'"-->
<!--                     :style="{width: '100%' ,height: '100%',}"></cache-image>-->
<!--        <cache-image :img-src="BaseImgUrl + '/fuli/get_bag_red_bg.png'"-->
<!--                     height="192rpx" />-->
                <image :src="BaseImgUrl+'/fuli/get_bag_red_bg.png'" style="width: 100% ;height: 100%"></image>
      </view>
      <view style="flex: 1"></view>
<!--      <cache-image :src="BaseImgUrl+'/fuli/click_get.png'"-->
<!--                   :style="{width: '160rpx' ,height: '64rpx',position:'relative'}"></cache-image>-->
            <image :src="BaseImgUrl+'/fuli/click_get.png'" style="width: 160rpx ;height: 64rpx;position: relative"></image>
    </view>
    <view style="height: 30rpx"></view>
    <!-- #endif -->

    <view class="day_discount">
      <view class="day_discount_top">
        <!--        <cache-image :img-src="BaseImgUrl + '/once/welfare/discount.png'" width="80rpx" height="80rpx"/>-->
        <image :src="BaseImgUrl + '/once/welfare/discount.png'"></image>
        <view class="day_discount_top_title">折扣天天领</view>
        <view class="day_discount_top_sub_title">&nbsp;&nbsp;吃喝玩乐5折起</view>
      </view>
      <view style="flex: 1"></view>
      <view style="display: flex;flex-wrap: wrap;margin: 0 10rpx;">
        <view class="nav_meu_wrap" v-if="resTTzkList.length>0">
          <swiper class="sssswiper" @change="gridChange" :current="currentMenuIndex"
                  :style="{height: resTTzkList[0].length > 5 ? '276rpx' : '138rpx'}">
            <swiper-item v-for="(itema, indexa) in resTTzkList" :key="indexa">
              <u-grid col="5" :border="false">
                <u-grid-item v-for="(itemg, indexs) in itema" @click="toPage(itemg, indexs)"
                             :index="indexs"
                             :key="indexs"
                             :customStyle="{padding: '10rpx 0'}">
                  <view v-if="itemg.type === 4">
                    <!-- #ifdef H5 -->
                    <wx-open-launch-weapp id="launch-btn"
                                          :username="itemg.original_id" :path="itemg.path"
                                          style="position: absolute;z-index: 89;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #1db9ff">
                      <component :is="'script'" type='text/wxtag-template' style="display: block;">
                        <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                      </component>
                    </wx-open-launch-weapp>
                    <!-- #endif -->
                    <view style="width: 100%;display: flex;align-items: center">
                      <image class="swiper_image" :src="BaseURL + itemg.image" mode="widthFix"></image>
                    </view>
                    <view class="grid-text">{{ itemg.name }}</view>
                  </view>

                  <view v-else>
                    <view style="width: 100%;display: flex;align-items: center">
                      <image class="swiper_image" :src="BaseURL + itemg.image" mode="widthFix"></image>
                    </view>
                    <view class="grid-text">{{ itemg.name }}</view>
                  </view>
                </u-grid-item>
              </u-grid>
            </swiper-item>
          </swiper>
          <view
              style="height: 6rpx;background-color: rgb(255,241,203);border-radius: 10rpx;margin: 4rpx auto 2rpx"
              :style="{width: resTTzkList.length > 1 ?'80rpx':'40rpx'}">
            <view :style="{width: '40rpx',height: '6rpx',backgroundColor: '#ffba0a',borderRadius: '10rpx', transition: 'all 0.3s',
            transform:currentMenuIndex===0?'translateX(0)':'translateX(40rpx)'}"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="vip_content">
      <view class="vip_content_top" @click="toGold">
        <view class="vip_content_top_title">兑换专区</view>
        <view style="flex: 1"></view>
        <view class="vip_content_top_more">更多</view>
        <image style="width: 22rpx;height: 22rpx;margin-left: 2rpx;margin-top: -5rpx"
               :src="BaseImgUrl + '/once/right.png'"></image>
      </view>
      <view style="flex: 1"></view>
      <view
          style="display: flex;flex-wrap: wrap;align-items: center;justify-content: center;margin-top: -30rpx;margin-bottom: 20rpx">
        <up-col span="6" justify="center" text-align="center" customStyle="margin-top: 30rpx;"
                v-for="(item, index) in redeemList" :key="index">
          <view class="item_content" :data-url="item">
            <cache-image :img-src="BaseURL + item.picture" width="100%" height="224rpx"/>
            <!--            <image :src="BaseURL + item.picture" style="width: 100%;height: 224rpx;margin: auto"></image>-->
            <view class="name">{{ item.title }}</view>
            <view class="gold_coins">{{ item.price }}金币</view>
            <view class="r_btn" style="margin: 26rpx auto 0" @click="redeem(item.id)">兑换</view>
          </view>
        </up-col>
      </view>

    </view>
    <u-modal :show="okShow" content="当月任务已完成,请下月再来哦" confirm-text="我已知晓"
             @confirm="okBack()"></u-modal>
    <view style="height: 168rpx"></view>
  </view>
</template>

<style lang="scss">
//test.lszbg.cn/imgs/fuli
page {
  background: #fde9c0;
  background-size: 100%;
  box-sizing: border-box;
  padding-bottom: 40rpx;
}
</style>
<style lang="scss" scoped>
.fuli_content {
  // #ifdef H5
  margin-top: -138rpx
  // #endif
}

.return_title {
  width: 100%;
  position: fixed;
  color: white;
  z-index: 999;
  top: 0;
  background: url("https://lsz.lszbg.com/imgs/fuli/background_top.png");
  background-size: cover;

  .content {
    height: 44px;
    display: flex;
    align-items: center;
  }

  .title {
    margin-right: 38rpx;
    font-size: 33rpx;
    flex: 1;
    text-align: center;
  }
}

image {
  width: 100%;
  height: 100%;
}

.wrapbg {
  position: relative;
  box-sizing: border-box;
  padding: 20rpx 30rpx 0;

  .jf_detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    height: 100rpx;
    background: linear-gradient(180deg, #FFEEE9 0%, #FFFFFF 100%);
    border: 2rpx solid #FFFFFF;
    border-radius: 20rpx;
    padding: 0 30rpx;

    .go_dh {
      width: 160rpx;
      height: 56rpx;
      background: linear-gradient(270deg, #FC754A 0%, #FE9E54 100%);
      font-weight: 400;
      font-size: 26rpx;
      color: #FFFFFF;
      font-style: normal;
      text-transform: none;
      text-align: center;
      line-height: 56rpx;
      border-radius: 30rpx;
    }

    .l_name {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;


      text {
        font-weight: bold;
        font-size: 30rpx;
        color: #F10B0B;
        line-height: 30rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      //&:before {
      //  content: '';
      //  display: inline-block;
      //  width: 76rpx;
      //  height: 60rpx;
      //  background: url('https://lsz.lszbg.com/public/uploads/test/sz_icon.png') no-repeat center center / 100% 100%;
      //  margin-right: 20rpx;
      //}
    }

    .detail_text {
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .white_content {
    box-sizing: border-box;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    position: relative;

    .rw_name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: -10rpx;
      padding-top: 48rpx;

      .l_text {
        margin-left: 28rpx;
        font-weight: 400;
        font-size: 40rpx;
        color: #212121;
        line-height: 48rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .r_all {
        font-size: 24rpx;
        color: #888;
        display: flex;
        align-items: center;

        &:after {
          content: '';
          display: inline-block;
          width: 28rpx;
          height: 28rpx;
          background: url('https://lsz.lszbg.com/public/uploads/test/right_arrow.png') no-repeat center center / 100% 100%;
        }
      }
    }

    .task_item_box {
      background: linear-gradient(180deg, #fdf5f3 0%, #fdfdfd 100%);
      border-radius: 28rpx;
      padding: 0 28rpx 28rpx;
    }

    .small_box_parent {
      margin-top: 16rpx;
    }

    .small_box {
      box-sizing: border-box;
      padding: 20rpx 0;
      border-bottom: 1px solid #EBEBEB;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      &:last-child {
        border: none;
        padding-bottom: 0;
      }

      .img_text {
        display: flex;
        align-items: center;

        .l_icon {
          width: 100rpx;
          height: 100rpx;
          margin-right: 20rpx;
        }

        .l_text {
          .title {
            font-size: 28rpx;
            color: #333;
          }

          .desc {
            font-size: 24rpx;
            color: #888;
            margin-top: 10rpx;
          }
        }
      }

      .r_btn {
        width: 160rpx;
        height: 56rpx;
        background: linear-gradient(90deg, #FC754A 0%, #FE9E54 100%);
        border-radius: 50rpx;
        line-height: 56rpx;
        text-align: center;
        font-size: 24rpx;
        color: #fff;

        &.fisih_btn {
          background: linear-gradient(270deg, #9B9B9B 0%, #777777 100%);
        }
      }
    }

    .cards_box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

    }
  }

  .c_small {
    width: 48%;
    margin-top: 30rpx;
    text-align: center;

    .img {
      width: 100%;
      height: 220rpx;
    }

    .title {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
    }

    .price {
      font-size: 28rpx;
      color: #FC764B;
      font-weight: bold;
      margin-top: 10rpx;
    }
  }
}

.r_btn {
  width: 188rpx;
  height: 56rpx;
  background: linear-gradient(90deg, #FC754A 0%, #FE9E54 100%);
  border-radius: 50rpx;
  line-height: 56rpx;
  text-align: center;
  font-size: 24rpx;
  color: #fff;
  box-shadow: 0 0 16rpx #FC754AAA;
  letter-spacing: 6rpx;

  &.fisih_btn {
    background: linear-gradient(270deg, #9B9B9B 0%, #777777 100%);
  }
}

.top-box {
  position: absolute;
  z-index: 2;
  top: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.return_img {
  width: 20rpx;
  height: 32rpx;
}

.menu-icon {
  margin-right: 20rpx;

  image {
    width: 100rpx;
    height: 100rpx;
  }
}

.lianxu {
  font-weight: bold;
  color: #DCB18A;
  font-size: 30rpx;
  margin-bottom: 10rpx;
}

.yiqiandao {
  color: #DCB18A;
}

.quwanc {
  border: 1px solid #DCB18A;
  border-radius: 200rpx;
  color: #DCB18A;
  width: 120rpx;
  height: 50rpx;
  line-height: 46rpx;
  text-align: center;
  margin-left: auto;
  font-size: 24rpx;
}

.lingqubtn {
  border-radius: 200rpx;
  color: #4F2600;
  width: 150rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  margin-left: auto;
  font-size: 25rpx;
  background: linear-gradient(to right, #FEE2C6, 50%, #F0BA8A);
}

.viplingqu {
  text-align: center;
  padding: 80rpx 0;
  background-color: #fff;

  image {
    width: 300rpx;
  }

  .gongxi {
    font-weight: bold;
    margin-top: 14rpx;
    font-size: 35rpx;
    color: #DCB18A;
  }

  .youxiaioqi {
    font-size: 32rpx;
    color: #DCB18A;
    margin: 20rpx 0 40rpx 0;
  }

  .lookbtn {
    color: #4F2600;
    border-radius: 200rpx;
    padding: 20rpx 10rpx;
    text-align: center;
    width: 60%;
    margin: 0 auto;
    font-size: 32rpx;
    background: linear-gradient(to right, #FEE2C6, 50%, #F0BA8A);
  }
}

// day_discount 折扣天天领
.day_discount {
  width: 690rpx;
  margin-left: 30rpx;
  background: linear-gradient(180deg, #FFECE6 0%, #FFFFFF 38%, #FFFFFF 100%);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  border: 3rpx solid #FFFFFF;
  display: flex;
  flex-direction: column;

  .day_discount_top {
    display: flex;
    align-items: center;

    image {
      width: 112rpx;
      height: 92rpx;
      margin: 20rpx;
    }

    .day_discount_top_title {
      font-weight: bold;
      font-size: 32rpx;
      color: #262626;
      line-height: 32rpx;
    }

    .day_discount_top_sub_title {
      font-weight: 400;
      font-size: 26rpx;
      color: #666666;
      line-height: 32rpx;
    }
  }
}

.vip_content {
  background: #FFFFFFEE;
  margin: 30rpx;
  padding: 20rpx 20rpx 10rpx;
  border-radius: 20rpx 20rpx 20rpx 20rpx;

  .vip_content_top {
    display: flex;
    align-items: center;
    padding: 10rpx;
    margin: 10rpx 0 20rpx;

    .vip_content_top_title {
      font-weight: bold;
      font-size: 32rpx;
      color: #262626;
      line-height: 32rpx;
      margin-left: 8rpx;
    }

    .vip_content_top_more {
      font-weight: 400;
      font-size: 24rpx;
      color: #888888;
      height: 24rpx;
      line-height: 24rpx;
    }
  }

  .item_content {
    margin: auto;
    width: 300rpx;
    height: 408rpx;
    box-shadow: 0 6rpx 8rpx 0 rgba(0, 0, 0, 0.1);
    background: #FFFFFF;
    border-radius: 10rpx;

    .name {
      font-weight: bold;
      font-size: 28rpx;
      color: #333333;
      line-height: 28rpx;
    }

    .gold_coins {
      font-weight: 400;
      font-size: 30rpx;
      color: #ff8b2c;
      line-height: 36rpx;
      margin-top: 20rpx;
    }
  }
}

.nav_meu_wrap {
  border-radius: 20rpx;
  padding: 0 0 6rpx 0;
  width: 96%;
  margin: 0 auto 10rpx;

  .nav_title {
    display: flex;
    align-items: center;
    padding-left: 26rpx;
    justify-content: space-between;
    margin: 0 auto;

    .nav_title_item {
      flex: 1;
      text-align: center;
      position: relative;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .m_title_name {
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 28rpx;
      }

      image {
        width: 50rpx;
        height: 20rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
  }

  .sssswiper {
    //height: 276rpx;

    image {
      width: 86rpx;
      height: 86rpx;
      margin: auto;
    }

    .grid-text {
      font-size: 24rpx;
      //margin-top: 10rpx;
    }
  }
}
</style>